<template>
  <d2-container>
    <template slot="header">
      <i class="el-icon-s-order"></i>&nbsp;微服务管理列表
    </template>
    <div>
      <el-button type="success" icon="el-icon-video-play">启动</el-button>
      <el-button type="danger" icon="el-icon-video-pause" @click=stopContainer>暂停</el-button>
      <el-button type="primary" icon="el-icon-refresh-right" @click=getRandomTime>接入</el-button>
    </div>
    <div>
     <el-divider>
      </el-divider>
    </div>
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="名称"
      width="120">
    <template slot-scope="scope">{{ scope.row.Names[0] }}</template>
    </el-table-column>
    <el-table-column
      prop="State"
      label="状态"
      width="180"
      :filters="[{ text: 'running', value: 'running' }, { text: 'unhealthy', value: 'unhealthy' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag
          :type="scope.row.State === 'running' ? 'primary' : 'success'"
          disable-transitions>{{scope.row.State}}</el-tag>
    </template>  
    </el-table-column>
    <el-table-column
      prop='Created'
      label="创建时间"
      width="120">
    </el-table-column>
    <el-table-column
      prop='NetworkSettings.Networks.demo-oai-public-net.IPAddress'
      label="ip地址"
      width="120">
    </el-table-column>
    <el-table-column
      prop='notion'
      label="说明"
      width="120">
    </el-table-column>
    <el-table-column
      prop='time'
      label="启动时间"
      width="120">
    </el-table-column>
  </el-table>
  </d2-container>
</template>
<script>
import Axios from 'axios'
export default {
  data () {
    return {
      tableData:[],
      multipleSelection:[],
      notions:[
        {
          name:"/oai-spgwu-slice1",
          notion:"基于4G 控制面网元spgwu实现的UPF网元，用于切片1"
        },
        {
          name:"/oai-smf-slice2",
          notion:"用于切片2的会话管理网元"
        },
        {
          name:"/oai-smf-slice3",
          notion:"用于切片3的会话管理网元"
        },
        {
          name:"/oai-smf-slice1",
          notion:"用于切片1的会话管理网元"
        },
        {
          name:"/oai-amf",
          notion:"用于接入和移动性管理网元"
        },
        {
          name:"/vpp-upf-slice3",
          notion:"基于vpp的UPF网元，用于切片3"
        },
        {
          name:"/oai-ausf",
          notion:"认证服务管理网元"
        },
        {
          name:"/oai-udm",
          notion:"统一数据管理网元"
        },
        {
          name:"/oai-udr",
          notion:"统一数据存储"
        },
        {
          name:"/oai-spgwu-slice2",
          notion:"基于4G 控制面网元spgwu实现的UPF网元，用于切片2"
        },
        {
          name:"/oai-nssf",
          notion:"网络切片选择功能"
        },
        {
          name:"/mysql",
          notion:"用户信息数据库"
        },
        {
          name:"/oai-ext-dn",
          notion:"外部数据网络"
        },
        {
          name:"/oai-nrf-slice3",
          notion:"用于切片3的网络注册功能网元"
        },
        {
          name:"/oai-nrf-slice2",
          notion:"用于切片2的网络注册功能网元"
        },
        {
          name:"/oai-nrf-slice12",
          notion:"用于切片1和2的网络注册功能网元"
        }
      ],
      timeRecord: [],
      flush: true,
      access: false
    }
  },
  methods: {
   handleSelectionChange(val) 
  {
    this.multipleSelection = val;
    this.flush = false;
  },
  filterTag(value, row){
    return row.state === value;
  },
  filterHandler(value, row, column)
  {
    const property = column['property'];
    return row[property] === value;
  },
  getLists()
  {
    Axios({
      method: 'get',
      url: '/container_apis/containers/json',
    }).then(res => {
      this.tableData = res.data
      for(var i = 0; i < res.data.length; i++) 
      {
        let times = new Date(this.tableData[i].Created*1000)
        let timeForm = times.toLocaleString()
        this.tableData[i].Created = timeForm
        if(this.access)
        {
          this.tableData[i]['time'] = parseInt(Math.random()*(100-50)+50)+"ms"
          this.timeRecord[i] = this.tableData[i].time
        }else{
          this.tableData[i].time=this.timeRecord[i]
        }
        for(var j = 0 ; j < this.notions.length; j++)
        {
          if(this.tableData[i].Names[0] ===  this.notions[j].name)
          {
            this.tableData[i]["notion"] = this.notions[j].notion
          }
        }
      }
      this.access = false
    })
  },
  getRandomTime()
  {
    this.access = true
  }
  ,
  stopContainer()
  {
    console.log(this.multipleSelection);
    for(var i = 0; i < this.multipleSelection.length; i++)
    {
      Axios({
      method: 'post',
      url: '/container_apis/containers'+this.multipleSelection[i].Names[0]+'/stop',
    }).then(res =>{
      console.log(res.data);
    })
    }
    // Axios({
    //   method: 'post',
    //   url: '/container/'+multipleSelection[0]
    // })
    this.flush = true
  }
  },
  mounted () {
      this.getLists()
      setInterval(() => {
        if(this.flush === true)
        {
          this.getLists()
        }
      }, 3000)
  }
}
</script>